<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件自定义事件</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{total}}</p>

    <!-- 在父组件在使用子组件地方监听子组件触发的事件 -->
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>

    <!--如果要绑定原生事件 则需要使用 .native 修饰符-->
    <button-counter v-on:click.native="yuanshengshijian"></button-counter>
</div>
<script>
    Vue.component("button-counter", {
        template : '<button v-on:click="increment">{{counter}}</button>',
        data : function () {
            return {counter : 0};
        },

        //组件自定义事件
        methods : {
            increment : function () {
                this.counter += 1;
                //触发子组件的监听来执行父组件的事件
                this.$emit("increment");
            }
        }
    });
    new Vue({
        el: "#app",
        data: {
            total : 0
        },
        methods : {
            incrementTotal : function () {
                this.total += 1;
            },
            yuanshengshijian : function () {
                this.total -= 1;
            }
        }
    })
</script>
</body>
</html>